<template>
  <div ref="echart" class="echartDiv"></div>
</template>
 
<script>
import { toRefs, ref, reactive, onMounted, getCurrentInstance } from "vue";
import {
  getwater,
  getorder,
  getuser,
  getstaff,
  getpurchase,
} from "@/apis/orderData.js";
import { Decimal } from "decimal.js";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    let state = reactive({
      echart: ref(),
    });

    const waterlist = ref([]);
    const userdata = ref();
    const staffdata = ref([]);
    const tableData = ref([]);
    const purchase = ref([]);

    let option = {
      title: {
        text: "收入支出统计表",
        subtext: "各项收入支出金额(单位:￥)",
        left: "center",
      },
      xAxis: {
        type: "category",
        data: ["桶装水", "押金", "采购", "工资"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 110, 130],
          type: "bar",
        },
      ],
    };

    onMounted(() => {
      sequence();
    });

    async function sequence() {
     await getwaterlist();
     await getuserdata();
     await getstaffdata();
     await getpurchasedata();
     await getdata();
    }

    async function getwaterlist() {
      await getwater().then((res) => {
        waterlist.value = res.data.page.list;
      });
    }

    async function getuserdata() {
      let userlist;
      let udata = 0;
      await getuser().then((res) => {
        userlist = res.data.page.list;
        for (let i in userlist) {
          udata += parseInt(userlist[i].barrel) * 30;
        }
        userdata.value = udata;
      });
    }

    async function getstaffdata() {
      let stafflist;
      let sdata = 0;
      await getstaff().then((res) => {
        stafflist = res.data.page.list;
        window.console.log(stafflist);
        for (let i in stafflist) {
          sdata = new Decimal(sdata)
            .add(new Decimal(stafflist[i].salary))
            .toNumber();
        }
        staffdata.value = sdata;
      });
    }

    async function getpurchasedata() {
      await getpurchase().then((res) => {
        let purchaselist = res.data.page.list;
        let purchasedata = 0;
        for (let i in purchaselist) {
          purchasedata += purchaselist[i].total;
        }
        purchase.value = purchasedata;
      });
    }

    async function getdata() {
      await getorder().then((res) => {
        tableData.value = res.data.page.list;
        tableData.value = mergearray(tableData.value, waterlist.value);
        let waterdata = 0;
        let tablelist = tableData.value;

        for (let i in tablelist) {
          waterdata += tablelist[i].price * tablelist[i].value;
        }

        option.series[0].data = [
          waterdata,
          userdata.value,
          {
            value: purchase.value,
            itemStyle: {
              color: "#a90000",
            },
          },
          {
            value: staffdata.value,
            itemStyle: {
              color: "#a90000",
            },
          },
        ];
        echartInit(option);
      });
    }

    function mergearray(arr1, arr2) {
      const arrs = arr1.map((item) => {
        const data = arr2.find((i) => item.wid == i.wid);
        return {
          ...item,
          ...data,
          value: data ? item.number : [],
          name: data ? data.wname : [],
        };
      });
      return arrs;
    }

    const echartInit = (options) => {
      let myChart = proxy.$echarts.init(state.echart);
      options && myChart.setOption(options);
    };

    return {
      ...toRefs(state),
      echartInit,
    };
  },
};
</script>
 
<style scoped>
.echartDiv {
  width: 100%;
  text-align: center;
}
</style>